<template>
	<view class="content">
		<!-- <image style="width: 100%; height: 160vh;" src="@/static/img/index_bg.png"></image> -->
		<view class="content2" :style="{'background-image':`url(${imagePath}temp/beijing1.png)`}">
			<image :src="coverImage" class="cover" mode="heightFix"></image>
			<text class="time_title">预计完成时间</text>
			<view v-show="false">
				<u-count-down :show="false" @change="changeTime" :time="endTime"></u-count-down>
			</view>
			<view class="u-row">
				<text class="time" v-if="isStartTime">{{time}}</text>
				<text class="time" v-if="isStartTime" style="font-size: 35rpx;">{{sec}}</text>
				<text class="time" v-if="!isStartTime">还未开始计时</text>
			</view>

			<!-- 进度框 -->
			<view class="progress_box">
				<text class="progress_infoText">{{swiperList0[0].orderStatus_dictText}}</text>
				<text class="progress_hint">锁定订单后预计7-14天完成</text>
				<view class="progress">
					<u-line-progress height="6" :percentage="currentProgress" :showText="false"
						activeColor="#3385FF"></u-line-progress>
				</view>
				<view class="progress_text">
					<text>配件采购</text>
					<text>配件分拣</text>
					<text>安排装机</text>
					<text>超频测试</text>
					<text>发货完毕</text>
				</view>
				<text class="hint2">锁定订单后皆不支持退款</text>
			</view>
			<!-- 进度历史信息和快递进度 -->
			<view class="progress_step">
				<u-subsection @change="selectPage" :list="list" :current="currentPage"></u-subsection>
				<view style="margin-top: 20rpx;"></view>
				<swiper :current='currentSwiper' @change="selectSwiper" style="height: 550rpx">
					<swiper-item>
						<scroll-view scroll-y="true" style="height: 550rpx;">
							<u-steps current="0" direction="column" :dot="true">
								<u-steps-item v-for="(item, index) in swiperList0" :title="item.orderRemark"
									:desc="item.updateTime">
								</u-steps-item>
							</u-steps>
						</scroll-view>
					</swiper-item>
					<swiper-item>
						<scroll-view scroll-y="true" style="height: 550rpx;">
							<view v-if="swiperList1.length == 0" style="padding-top: 100rpx;">
								<u-empty text="快递还没有发货哦" mode="order"></u-empty>
							</view>
							<u-steps current="0" direction="column" :dot="true">
								<u-steps-item v-for="item in swiperList1" :title="item.remark" :desc="item.acceptTime">
								</u-steps-item>
							</u-steps>
						</scroll-view>
					</swiper-item>
				</swiper>
				<!-- <i class="iconfont icon-home-g"></i> -->
			</view>
		</view>

		<view class="top_bar">
			<image src="@/static/img/search.png"></image>
			<input v-model="searchCode" placeholder="请输入编号" />
			<button @click="search">查 询</button>
		</view>
		<!-- <i v-if="false" @click="back" class="iconfont icon-home-g back"></i> -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getInfo
	} from '../../utils/shunfengUtils'
	export default {
		data() {
			return {
				showContent: true,
				list: ['装机进度', '快递进度'],
				currentPage: 0,
				currentSwiper: 0,
				endTime: 0,
				sec: "",
				time: "00:00:00",
				heightParameter: 95,
				swiperList0: [],
				swiperList1: [],
				orderId: "",
				coverImage: "",
				imagePath: "http://47.98.252.39:8081/jeecg-boot/sys/common/static/",
				currentProgress: 10,
				currentTitle: "待配件采购中",
				stateList: [{
						title: "待配件采购中",
						progress: 10
					},
					{
						title: "待配件分拣中",
						progress: 30
					},
					{
						title: "待工作人员装机中",
						progress: 50
					},
					{
						title: "待超频测试中",
						progress: 70
					},
					{
						title: "发货完毕",
						progress: 100
					},
					{
						title: "测试失败,请联系客服",
						progress: 70
					},
				],
				searchCode: "",
				isStartTime: false
			}
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.data)).records
			this.imagePath = this.$common.imageUrl
			this.orderId = options.orderId
			this.swiperList0 = data
		},
		mounted() {
			this.getExpressage()
			this.initPage()
		},
		methods: {
			initPage() {
				// 封面
				this.coverImage = this.imagePath + this.swiperList0[this.swiperList0.length - 1].sfOrder
				// 倒计时
				let timestamp = Date.parse(this.swiperList0[this.swiperList0.length - 1].createTime) + (14 * 24 * 60 * 60 *
					1000)
				let now = Date.now()
				if (timestamp - now <= 0) {
					this.endTime = 0
				} else {
					// 如果还没开始，就显示未开始
					console.log(`${now}=====${Date.parse(this.swiperList0[this.swiperList0.length - 1].createTime)}`)
					if (now < Date.parse(this.swiperList0[this.swiperList0.length - 1].createTime)) {
						this.isStartTime = false
					} else {
						this.isStartTime = true
					}
					this.endTime = timestamp - now
					
					//如果点击开始了就按照采集时间算
					if(!this.isStartTime && this.swiperList0.length >= 2){
						this.isStartTime = true
						let timestamp2 = Date.parse(this.swiperList0[this.swiperList0.length - 2].updateTime) + (14 * 24 * 60 * 60 *
							1000)
						this.endTime = timestamp2 - now
					}
				}
				//进度条
				let stateNum = 0
				let lastData = this.swiperList0[0]
				if (lastData.orderStatus <= 2) {
					stateNum = 0
				} else if (lastData.orderStatus <= 3) {
					stateNum = 1
				} else if (lastData.orderStatus <= 5) {
					stateNum = 2
				} else if (lastData.orderStatus <= 7) {
					stateNum = 3
				} else if (lastData.orderStatus == 8) {
					stateNum = 5
				} else if (lastData.orderStatus == 9) {
					stateNum = 4
					// this.endTime = 0
				}
				this.currentProgress = this.stateList[stateNum].progress
				this.currentTitle = this.stateList[stateNum].title
			},
			// 快递获取
			getExpressage() {
				this.$minApi.getExpressage({
					id: this.orderId
				}).then(res => {
					if (res.code == 500) {
						this.swiperList1 = []
						return
					}
					if (res.code != 200) {
						return
					}
					let data = res.result.msgData.routeResps[0].routes
					data = data.reverse()
					this.swiperList1 = data
				})
			},
			search() {
				if (!this.searchCode) {
					return
				}
				this.orderId = this.searchCode
				uni.showLoading()
				this.$minApi.searchOrder({
					id: this.orderId
				}).then(res => {
					console.log('请求结果' + JSON.stringify(res))
					if (res.code == 200 && res.result.records.length > 0) {
						let data = res.result.records
						this.swiperList0 = data
						this.initPage()
						this.getExpressage()
					} else {
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							message: "请输入正确的订单编号！"
						})
					}
				}).finally(e => {
					uni.hideLoading()
				})
			},
			selectSwiper(e) {
				this.currentPage = e.target.current
			},
			selectPage(e) {
				if (this.currentPage == e) {
					return
				}
				console.log(e)
				this.currentPage = e
				this.currentSwiper = e
			},
			back() {
				uni.navigateBack()
			},
			changeTime(e) {
				let str = ""
				if(this.swiperList0[0].orderStatus == 9){
					this.time = "订单已完成"
					this.sec = ""
					return
				}
				let day = "00"
				let hour = "00"
				let min = "00"
				let sec = "00"
				if (e.days) {
					day = `${'0'.repeat(2 - String(e.days).length)}${e.days}`
				}
				if (e.hours) {
					hour = `${'0'.repeat(2 - String(e.hours).length)}${e.hours}`
				}
				if (e.minutes) {
					min = `${'0'.repeat(2 - String(e.minutes).length)}${e.minutes}`
				}
				if (e.seconds) {
					sec = `${'0'.repeat(2 - String(e.seconds).length)}${e.seconds}`
				}
				str = `${day}:${hour}:${min}:`
				this.time = str
				this.sec = sec
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #E8E8E8;
		justify-content: center;
	}

	.content2 {
		width: 100%;
		display: flex;
		top: 0;
		background-attachment: fixed;
		background-size: cover;
		flex-direction: column;
		align-items: center;
		position: absolute;
		justify-content: center;
	}

	.index_bg {
		width: 100%;
		height: 100%;
	}

	.top_bar {
		position: fixed;
		top: 175rpx;
		width: 90%;
		border-radius: 50rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		background-color: white;

		image {
			width: 45rpx;
			height: 45rpx;
			margin-left: 20rpx;
		}

		input {
			margin-left: 20rpx;
			width: 60%;
			font-size: 30rpx;
		}

		button {
			background: linear-gradient(135deg, #0F44DB, #7196FF);
			width: 150rpx;
			border-radius: 50rpx;
			height: 60rpx;
			font-size: 30rpx;
			line-height: 60rpx;
			color: white;

		}
	}

	.cover {
		height: 300rpx;
		width: 250rpx;
		margin-top: 250rpx;
	}

	.time_title {
		color: #000;
		font-size: 28rpx;
		letter-spacing: 3rpx;
	}

	.time {
		color: #FD394B;
		margin-top: 15rpx;
		font-size: 50rpx;
		letter-spacing: 3rpx;
		font-weight: bold;
	}

	/* 进度框 */
	.progress_box {
		width: 90%;
		background-color: #fff;
		height: 260rpx;
		margin-top: 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
		border-radius: 15rpx;

		.progress_infoText {
			font-size: 35rpx;
			margin-top: 10rpx;
			margin-left: 25rpx;
			font-family: 'SimHei', Arial, sans-serif;
			font-weight: bold;
		}

		.progress_hint {
			font-size: 20rpx;
			margin-top: 5rpx;
			margin-left: 25rpx;
			color: #848282;
		}

		.progress {
			margin-top: 30rpx;
			margin-left: 25rpx;
			margin-right: 20rpx;
		}

		.progress_text {
			display: flex;
			flex-direction: row;
			font-size: 20rpx;
			margin-left: 25rpx;
			justify-content: space-between;
			padding-right: 20rpx;
			margin-top: 20rpx;
		}

		.hint2 {
			font-size: 16rpx;
			color: #A7A7A7;
			margin-left: 25rpx;
			margin-top: 30rpx;
		}
	}

	.progress_step {
		width: 90%;
		padding: 15rpx;
		box-sizing: border-box;
		background-color: white;
		border-radius: 15rpx;
		box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
		margin-top: 30rpx;
		margin-bottom: 50rpx;
	}

	.back {
		position: fixed;
		top: 85rpx;
		left: 50rpx;
		color: white;
		font-size: 40rpx;
	}
</style>